<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>抽奖</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#cTable{
			width: 500px;
			height: 400px;
			border: 1px  dashed solid black;
			border-radius: 100px;
		}
		#but{
			width: 100px; 
			height: 45px; 
			margin-top: 30px; 
			margin-left: 10px;  
			box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
			margin-bottom: 10px;
			font-size: 15px;
			font-family: 宋体;
			font-weight: bold;
		}
	</style>
	<body>
	
		<!--抽奖  -->
		<div id="cBody">
			<input type="button"  id="but" value="点击抽奖" onclick="lickC(event)"/>
			<table id="cTable" border="1" >
				<tr>
					<td>詹三</td><td>詹四</td><td>詹五</td>
				</tr>
				<tr>
					<td>詹六</td><td>詹七</td><td>詹八</td>
				</tr>
				<tr>
					<td>詹二</td><td>詹十</td><td>詹九</td>
				</tr>
				
			</table>
		</div>
	</body>
	<script type="text/javascript">
		
		
		//抽奖初始化
		function lickC(event){
			var td1=document.getElementsByTagName('td');
			event.target.value = '抽奖中...';
			var num=0;
			//抽奖开始
			var ifAllRom=setInterval(function(){
				
				for (var i = 0; i < td1.length; i++) {
					td1[i].style.background='aqua';
					
				}
				//接受随机的生成的值
				var varRom=cRomod();
				td1[varRom].style.background='red';
				console.log('中奖结果：'+varRom);
				num++;
				if(num>=10){
					clearInterval(ifAllRom);
					event.target.value = "重新抽奖...";
				};
			},50);
		}
		//创建随机数
		function cRomod(){
			while(true){
				var rom=Math.floor(Math.random(0)*10);
				if (rom!=0) {
					return rom;
				}
			}
		}
	</script>
</html>
